<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../static/image/favicon.png" type="image/png">
    <title>光影世界 - 高品质影片在线播放平台</title>
    <!-- 引入 echarts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <!-- 引入 echarts 中文语言包 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts-i18n-zh-CN.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF4D4F',
                        dark: '#1E293B',
                        'dark-light': '#334155',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            }
            .bg-gradient-overlay {
                background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }
            .animate-scale {
                transition: transform 0.3s ease;
            }
            .animate-scale:hover {
                transform: scale(1.05);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .vip-glow {
            box-shadow: 0 0 8px rgba(253, 204, 13, 0.7);
            transition: box-shadow 0.3s ease-in-out;
        }

        .vip-glow:hover {
            box-shadow: 0 0 12px rgba(253, 204, 13, 1);
        }
    </style>
</head>
<body class="bg-dark text-light font-inter antialiased">
<!-- 导航栏 -->
<header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-dark/90 backdrop-blur-md">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa-solid fa-film text-primary text-2xl"></i>
            <span class="text-xl font-bold text-white">光影世界</span>
        </div>

        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8">
            <a href="index.html" class="text-gray-300 font-medium hover:text-primary transition-colors">首页</a>
            <a href="show.html" class="text-gray-300 font-medium hover:text-primary transition-colors">影片展示</a>
            <a href="rating.html" class="text-gray-300 font-medium hover:text-primary transition-colors">电影排行</a>
            <a href="query.html" class="text-gray-300 font-medium hover:text-primary transition-colors">作品查询</a>
            <a href="echarts.html" class="text-white font-medium hover:text-primary transition-colors">图表展现</a>
        </nav>

        <div class="flex items-center space-x-4">
            <!--<div class="relative hidden md:block">
                <input type="text" placeholder="搜索影片..." class="bg-dark-light/50 rounded-full py-1.5 pl-10 pr-4 text-sm w-48 focus:w-64 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>-->

            <!-- 会员按钮 -->
            <div id="vip-button-container" class="bg-gradient-to-r from-yellow-400 to-yellow-600 hover:from-yellow-500 hover:to-yellow-700 text-white py-1.5 px-4 rounded-full text-sm font-medium transition-all"></div>

            <!--登录按钮-->
            <div id="auth-button-container" class="bg-primary hover:bg-primary/90 text-white py-1.5 px-4 rounded-full text-sm font-medium transition-all"></div>

            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-white focus:outline-none">
                <i class="fa-solid fa-bars text-xl"></i>
            </button>
        </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-dark-light/95 backdrop-blur-md animate-fade-in">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
            <div class="relative">
                <input type="text" placeholder="搜索影片..." class="bg-dark/50 rounded-full py-1.5 pl-10 pr-4 text-sm w-full focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
            <a href="#" class="text-white font-medium py-2 hover:bg-dark rounded-lg px-3 transition-colors">首页</a>
            <a href="#" class="text-gray-300 font-medium py-2 hover:bg-dark rounded-lg px-3 transition-colors">电影</a>
            <a href="#" class="text-gray-300 font-medium py-2 hover:bg-dark rounded-lg px-3 transition-colors">剧集</a>
            <a href="#" class="text-gray-300 font-medium py-2 hover:bg-dark rounded-lg px-3 transition-colors">动漫</a>
            <a href="#" class="text-gray-300 font-medium py-2 hover:bg-dark rounded-lg px-3 transition-colors">综艺</a>
        </div>
    </div>
</header>

<main class="pt-16">
    <div class="chart-container flex flex-wrap justify-center gap-8">
        <div id="barChart" style="width: 600px; height: 400px;"></div>
        <div id="pieChart" style="width: 600px; height: 400px;"></div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark-light py-12">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-6">
                    <i class="fa-solid fa-film text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-white">光影世界</span>
                </div>
                <p class="text-gray-400 mb-6">高品质影片在线播放平台，提供丰富的电影、剧集、动漫和综艺资源，满足您的各种观影需求。</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa-brands fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa-brands fa-youtube"></i>
                    </a>
                </div>
            </div>

            <div>
                <h3 class="text-white font-bold text-lg mb-6">快速链接</h3>
                <ul class="space-y-3">
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">电影</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">剧集</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">动漫</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">综艺</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">最新上线</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-white font-bold text-lg mb-6">支持</h3>
                <ul class="space-y-3">
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">帮助中心</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">常见问题</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">设备支持</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">联系我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">隐私政策</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">服务条款</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-white font-bold text-lg mb-6">下载应用</h3>
                <p class="text-gray-400 mb-4">随时随地观看您喜爱的内容，下载我们的移动应用</p>
                <div class="space-y-3">
                    <a href="#" class="block bg-dark hover:bg-dark-light text-white p-3 rounded-lg flex items-center space-x-3 transition-colors">
                        <i class="fa-brands fa-apple text-xl"></i>
                        <div>
                            <div class="text-xs">下载</div>
                            <div class="font-medium">App Store</div>
                        </div>
                    </a>
                    <a href="#" class="block bg-dark hover:bg-dark-light text-white p-3 rounded-lg flex items-center space-x-3 transition-colors">
                        <i class="fa-brands fa-google-play text-xl"></i>
                        <div>
                            <div class="text-xs">下载</div>
                            <div class="font-medium">Google Play</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 光影世界. 保留所有权利</p>
            <div class="flex space-x-6">
                <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">隐私政策</a>
                <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">服务条款</a>
                <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">Cookie 政策</a>
            </div>
        </div>
    </div>
</footer>

<script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('bg-dark/95', 'shadow-lg');
            navbar.classList.remove('bg-dark/90');
        } else {
            navbar.classList.remove('bg-dark/95', 'shadow-lg');
            navbar.classList.add('bg-dark/90');
        }
    });

    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
        if (!mobileMenu.classList.contains('hidden')) {
            menuToggle.innerHTML = '<i class="fa-solid fa-times text-xl"></i>';
        } else {
            menuToggle.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
        }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // 图片懒加载
    document.addEventListener("DOMContentLoaded", function() {
        const lazyImages = [].slice.call(document.querySelectorAll("img"));

        if ("IntersectionObserver" in window) {
            let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        let lazyImage = entry.target;
                        lazyImage.classList.add("fade-in");
                        lazyImageObserver.unobserve(lazyImage);
                    }
                });
            });

            lazyImages.forEach(function(lazyImage) {
                lazyImageObserver.observe(lazyImage);
            });
        }
    });

    // 检查 localStorage 中是否存在 username 和 token
    function checkLoginStatus() {
        const username = localStorage.getItem('username');
        const token = localStorage.getItem('token');
        console.log('[' + username + ']');
        const container = document.getElementById('auth-button-container');
        container.innerHTML = ''; // 清空容器

        if (username && token) {
            // 用户已登录，显示用户名和退出按钮
            const userContainer = document.createElement('div');
            userContainer.className = 'flex items-center space-x-4';

            const usernameText = document.createElement('span');
            usernameText.textContent = username;
            usernameText.className = 'text-white text-sm font-medium';

            const logoutButton = document.createElement('button');
            logoutButton.textContent = '退出';
            logoutButton.className = 'bg-secondary hover:bg-red-500 text-white py-1.5 px-4 rounded-full text-sm font-medium transition-all';
            logoutButton.onclick = handleLogout;

            userContainer.appendChild(usernameText);
            userContainer.appendChild(logoutButton);
            container.appendChild(userContainer);
        } else {
            // 用户未登录，显示登录按钮
            const loginButton = document.createElement('button');
            loginButton.textContent = '登录';
            loginButton.className = 'bg-primary hover:bg-primary/90 text-white py-1.5 px-4 rounded-full text-sm font-medium transition-all';
            container.appendChild(loginButton);
            loginButton.onclick = () => window.location.href = '/video-platform/src/main/resources/templates/login.html';
        }
    }

    // 处理退出按钮点击事件
    function handleLogout() {
        // 清除 localStorage 中的数据
        localStorage.removeItem('username');
        localStorage.removeItem('token');
        localStorage.removeItem('role');

        // 重新检查登录状态并更新 UI
        checkLoginStatus();
        checkVipStatus();
    }

    // 页面加载时检查登录状态和是否是vip
    document.addEventListener('DOMContentLoaded', () => {
        checkLoginStatus();
        checkVipStatus(); // 添加这一行来触发VIP状态检查
    });

    // 检查VIP状态
    function checkVipStatus() {
        const container = document.getElementById('vip-button-container');
        container.innerHTML = ''; // 清空容器

        const isVip = localStorage.getItem('role') == 1; // 假设通过这个字段判断是否是VIP

        if (isVip) {
            // 已经是VIP，显示VIP标识
            const vipContainer = document.createElement('div');
            vipContainer.className = 'flex items-center space-x-2';

            const crownIcon = document.createElement('i');
            crownIcon.className = 'fas fa-crown';

            const vipText = document.createElement('span');
            vipText.textContent = 'VIP';
            vipText.className = 'font-bold';

            vipContainer.appendChild(crownIcon);
            vipContainer.appendChild(vipText);
            container.appendChild(vipContainer);
        } else {
            // 非VIP，显示开通按钮
            const vipButton = document.createElement('button');
            vipButton.textContent = '开通会员';
            vipButton.className = 'text-white font-medium flex items-center space-x-2';
            vipButton.onclick = handleVipPurchase;

            container.appendChild(vipButton);
        }
    }

    // 处理开通VIP逻辑
    async function handleVipPurchase() {
        const token = localStorage.getItem('token');
        const username = localStorage.getItem('username');
        if (!token || !username) {
            alert('请先登录');
            return;
        }
        try {
            const response = await fetch("http://localhost:8080/api/pay", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    username
                })
            });
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            const data = await response.json();
            if(data.code == 200){
                alert('支付成功，你已成为vip');
                localStorage.setItem('role', 1);
                checkVipStatus();
            }
        }catch(error) {
            alert(error);
        }
    }
    document.addEventListener("DOMContentLoaded", function () {
        // 初始化图表
        const barChart = echarts.init(document.getElementById('barChart'));
        const pieChart = echarts.init(document.getElementById('pieChart'));

        // 请求后端数据
        fetch('http://localhost:8080/api/report/movies/data')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => {
                renderBarChart(barChart, data);
                renderPieChart(pieChart, data);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                alert('无法加载图表数据，请检查网络或服务状态。');
            });
    });

    // 渲染柱状图
    function renderBarChart(chart, data) {
        const option = {
            title: {
                text: '电影播放量排行',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: data.titles,
                axisLabel: {
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                name: '播放量'
            },
            series: [{
                name: '播放量',
                type: 'bar',
                data: data.hits,
                itemStyle: {
                    color: '#165DFF'
                }
            }]
        };
        chart.setOption(option);
    }

    // 渲染饼图
    function renderPieChart(chart, data) {
        const seriesData = data.titles.map((title, index) => ({
            name: title,
            value: data.hits[index]
        }));

        const option = {
            title: {
                text: '电影播放占比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [{
                name: '播放量',
                type: 'pie',
                radius: '50%',
                data: seriesData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    borderRadius: 5
                }
            }]
        };
        chart.setOption(option);
    }
</script>
</body>
</html>